/**
 * Created by caoning on 2017/12/13.
 * 营收分析
 */

// 搜索
// $("#search").on('click', function () {
//     var t1 = $("#tic-start").val();
//     var t2 = $("#tic-end").val();
//     if ((!t1) || (!t2) || ((!t1) && (!t2))) {
//         dyw.box.alert('请选择查询日期');
//         return false
//     }
//     loadData({
//         type: 'get',
//         url: '/bigdata/manage/ticket/all-ratio',
//         data: {
//             start_time: t1,
//             end_time: t2
//         },
//         interval: 0,
//         callback: function (res) {
//             if (res.code == 1) {
//                 dyw.box.alert(res.msg);
//                 return false
//             }
//             // 总体门票分析
//         totalityTickets(res.result.totalityTickets);
//         // 八里沟门票分析
//         baligouList(res.result.baligouList);
//         // 九连山门票分析
//         jiulianshanList(res.result.jiulianshanList);
//         // 天界山门票分析
//         tianjieshanList(res.result.tianjieshanList);
//         // 线上OTA分销统计
//         onlineOtaList(res.result.onlineOtaList)
//         }
//     })
// })

// loadData({
//     type: 'get',
//     url: '/bigdata/manage/ticket/all-ratio',
//     data: {},
//     interval: 0,
//     callback: function (res) {
//         if (res.code == 1) {
//             dyw.box.alert(res.msg);
//             return false
//         }
//         $("#tic-start").val(res.result.start_time);
//         $("#tic-end").val(res.result.end_time);
//         // 总体门票分析
//         totalityTickets(res.result.totalityTickets);
//         // 八里沟门票分析
//         baligouList(res.result.baligouList);
//         // 九连山门票分析
//         jiulianshanList(res.result.jiulianshanList);
//         // 天界山门票分析
//         tianjieshanList(res.result.tianjieshanList);
//         // 线上OTA分销统计
//         onlineOtaList(res.result.onlineOtaList)
//     }
// })

// function totalityTickets(data) {
//     var totalityTickets = data
//         //$(".left").find(".t1 #num1").text(totalityTickets.ticketType.tickets);
//         $(".left").find(".t2 #num2").text(totalityTickets.sellChannel.tickets);
//         // 售票种类占比
//         optionShoupiaozhonglei.series[0].data = totalityTickets.ticketType.data;
//         optionShoupiaozhonglei.legend.data = totalityTickets.ticketType.xAxis;
//         shoupiaozhonglei.setOption(optionShoupiaozhonglei);
//         // 销售渠道占比
//         optionXiaoshouqudao.series[0].data = totalityTickets.sellChannel.data
//         xiaoshouqudao.setOption(optionXiaoshouqudao);
//         // 游客类型占比
//         optionyoukeleixing.series[0].data = totalityTickets.touristsType
//         youkeleixing.setOption(optionyoukeleixing);
//         var totalCarr = utils.linerScale(totalityTickets.ticketStyle.data, 'quan');
//         totalCarr.forEach(function (item, key) {
//             $(".left .full .val span").eq(key).text(item.quan)
//             $(".left .full .per span").eq(key).height(item.per + "%");
//         });
// };
// function baligouList(data) {
//         let list = data.touristsType
//         $(".qing").find(".t1 #num3").text(data.sellChannel.tickets);
//         $(".qing").find(".t2 #num2").text(data.ticketStyle.tickets);
//         // 销售渠道占比
//         optionXiaoshouqudao2.series[0].data = data.sellChannel.data
//         xiaoshouqudao2.setOption(optionXiaoshouqudao2);
//         // 门票游客类型占比
//         list.forEach(function (item, key) {
//             var $dom = $(".rate li").eq(key);
//             $dom.find(".vol").attr('title', '分布占比：' + list[key].value)
//             $dom.find(".vol").addClass('tooltips');
//             var $dom = $(".rate li").eq(key);
//             $dom.find(".name span").text(item.name);
//             $dom.find(".num").text(item.value);
//             $dom.find(".vol span").width(item.per + '%')
//         })
//         // 销售门票
//         var cArr = utils.linerScale(data.ticketStyle.data, 'quan');
//         cArr.forEach(function (item, key) {
//             $(".full-ba .val span").eq(key).text(item.quan)
//             $(".full-ba .per span").eq(key).height(item.per + "%");
//         });
// };
// function jiulianshanList(data) {
//     let jiulianshanData = data
//         let listJiu = jiulianshanData.touristsType
//         $(".dong").find(".t1 #num3").text(jiulianshanData.sellChannel.tickets);
//         $(".dong").find(".t2 #num2").text(jiulianshanData.ticketStyle.tickets);
//         // 销售渠道占比
//         optionDngjingqudao.series[0].data = jiulianshanData.sellChannel.data
//         dongjingqudao.setOption(optionDngjingqudao);

//         listJiu.slice(0, 5).forEach(function (item, key) {
//             var $dom = $(".jiu li").eq(key);
//             $dom.find(".vol").attr('title', '分布占比：' + listJiu[key].value)
//             $dom.find(".vol").addClass('tooltips')

//             var $dom = $(".jiu li").eq(key);
//             $dom.find(".name span").text(item.name);
//             $dom.find(".num").text(item.value);
//             console.log(item.per)
//             $dom.find(".vol span").width(item.per + '%')
//         });
//         var cArr = utils.linerScale(jiulianshanData.ticketStyle.data, 'quan');
//         cArr.forEach(function (item, key) {
//             $(".dong .val span").eq(key).text(item.quan)
//             $(".dong .per span").eq(key).height(item.per + "%");
//         });
// };
// function tianjieshanList(data) {
//     let tianjieshanList = data
//         let listTian = tianjieshanList.touristsType
//         $(".park").find(".t1 #num3").text(tianjieshanList.sellChannel.tickets);
//         $(".park").find(".t2 #num2").text(tianjieshanList.ticketStyle.tickets);
//         // 销售渠道占比
//         optionTianjieshan.series[0].data = tianjieshanList.sellChannel.data
//         tianjieshan.setOption(optionTianjieshan);

//         listTian.slice(0, 5).forEach(function (item, key) {
//             var $dom = $(".tian li").eq(key);
//             $dom.find(".vol").attr('title', '分布占比：' + listTian[key].value)
//             $dom.find(".vol").addClass('tooltips')

//             var $dom = $(".tian li").eq(key);
//             $dom.find(".name span").text(item.name);
//             $dom.find(".num").text(item.value);
//             $dom.find(".vol span").width(item.per + '%')
//         });
//         var cArr = utils.linerScale(tianjieshanList.ticketStyle.data, 'quan');
//         cArr.forEach(function (item, key) {
//             $(".park .val span").eq(key).text(item.quan)
//             $(".park .per span").eq(key).height(item.per + "%");
//         });
// };
// 线上OTA分销统计
// function onlineOtaList(data) {
//     let otaList = data
//     optionWangluo.series[0].data = otaList.onlineTicket
//     wangluo.setOption(optionWangluo);
//     XianshangOption.series[0].data = otaList.onlineTicketBar.series
//     XianshangOption.xAxis[0].data = otaList.onlineTicketBar.xAxis
//     xianshang.setOption(XianshangOption);
//     $("#num7").text(otaList.tickets)
// }


// 停车场实时分析
// loadData({
//     type: 'get',
//     url: '/bigdata/manage/park/parking-space',
//     data: {},
//     interval: 0,
//     callback: function (res) {
//         let stopCar = res.result
//         $(".right").find(".t3 #num3").text(stopCar.sellChannel.tickets);
//         // 销售渠道占比
//         optionStopCar.series[0].data = stopCar.sellChannel.data
//         stopCarAnalyze.setOption(optionStopCar);
//         setUnder(res.result.tickets)
//     }
// })

// function setUnder(data) {
//     var cnum = [];
//     data.forEach(function (val, index) {
//         var obj = {};
//         obj.value = val.value;
//         cnum.push(obj)
//     })
//     var cArr = utils.linerScale(cnum, 'value')
//     cArr.forEach(function (item, key) {
//         $(".full-stop .val span").eq(key).text(item.value)
//         $(".full-stop .per span").eq(key).height(item.per + "%");
//     })
// }

// 售票种类占比
var shoupiaozhonglei = echarts.init(document.getElementById('shoupiaozhonglei'));
var optionShoupiaozhonglei = {
    color: ["#49945f", "#0069ad", "#003d64"],
    tooltip: {
        trigger: 'item',
        formatter: "{a} <br/> {b} : {c} ({d}%)",
        
position: function (point, params, dom, rect, size) {
    var x = 0; // x坐标位置
    var y = 0; // y坐标位置
    var pointX = point[0];
    var pointY = point[1];
    var boxWidth = size.contentSize[0];
    var boxHeight = size.contentSized[1];
    if (boxWidth > pointX) {
      x = 5;
    } else { // 左边放的下
      x = pointX - boxWidth;
    }
    if (boxHeight > pointY) {
      y = 5;
    } else { // 上边放得下
      y = pointY - boxHeight;
    }
    return [x, y];
  }
    },
    legend: {
        orient: 'vertical',
        right: '40%',
        top: '40%',
        itemWidth: 15,
        itemHeight: 10,
        textStyle: {
            color: '#fff'
        },
        data: ['现金', '电子商务']
    },
    series: [
        {
            "center": ["30.0%", "55%"],
            name: '售票种类占比',
            type: 'pie',
            radius: ['50%', '70%'],
            left: 6,
            top: 30,
            avoidLabelOverlap: false,
            label: {
                normal: {
                    show: false,
                    position: 'center'
                },
                emphasis: {
                    show: true,
                    textStyle: {
                        fontSize: '12',
                        color: '#fff'
                    }
                }
            },
            labelLine: {
                normal: {
                    show: false
                }
            },
            data: ['25700','51498']
        }
    ]
};
// 使用刚指定的配置项和数据显示图表。
shoupiaozhonglei.setOption(optionShoupiaozhonglei);

// 停车场实时分析
var stopCarAnalyze = echarts.init(document.getElementById('stopCar'));
var optionStopCar = {
    color: ['#f8942e', '#0069ad', '#003d64'],
    tooltip: {
        trigger: 'item',
        formatter: "{a} <br/> {b} : {c} ({d}%)"
    },
    legend: {
        orient: 'vertical',
        right: '0%',
        top: '0',
        itemWidth: 15,
        itemHeight: 10,
        textStyle: {
            color: '#fff'
        },
        data: ['手动缴费', '无感支付']
    },
    series: [
        {
            "center": [
                "35%",
                "45%"
            ],
            name: '售票种类占比',
            type: 'pie',
            radius: ['40%', '60%'],
            left: 16,
            top: 20,
            avoidLabelOverlap: false,
            label: {
                normal: {
                    show: false,
                    position: 'center'
                },
                emphasis: {
                    show: true,
                    textStyle: {
                        fontSize: '12',
                        color: '#fff'
                    }
                }
            },
            labelLine: {
                normal: {
                    show: false
                }
            },
            data: [
                { value: 800, name: '手动缴费' },
                { value: 300, name: '无感支付' }
            ]
        }
    ]
};
// 使用刚指定的配置项和数据显示图表。
stopCarAnalyze.setOption(optionStopCar);

// 销售渠道占比
var xiaoshouqudao = echarts.init(document.getElementById('xiaoshouqudao'));
var optionXiaoshouqudao = {
    color: ['#f88f23', '#0069ad', '#003d64'],
    tooltip: {
        trigger: 'item',
        formatter: "{a} <br/> {b} : {c} ({d}%)",
        position: function (point, params, dom, rect, size) {
            var x = 0; // x坐标位置
            var y = 0; // y坐标位置
            var pointX = point[0];
            var pointY = point[1];
            var boxWidth = size.contentSize[0];
            var boxHeight = size.contentSize[1];
            if (boxWidth > pointX) {
              x = 5;
            } else { // 左边放的下
              x = pointX - boxWidth;
            }
            if (boxHeight > pointY) {
              y = 5;
            } else { // 上边放得下
              y = pointY - boxHeight;
            }
            return [x, y];
          }
    },
    legend: {
        orient: 'vertical',
        right: '5%',
        bottom: '25%',
        itemWidth: 15,
        itemHeight: 10,
        textStyle: {
            color: '#fff'
        },
        data: ['景区购票', '网络购票']
    },
    series: [
        {
            "center": [
                "30.0%",
                "55%"
            ],
            name: '销售渠道占比',
            type: 'pie',
            radius: ['50%', '70%'],
            left: 6,
            top: 30,
            avoidLabelOverlap: false,
            label: {
                normal: {
                    show: false,
                    position: 'center'
                },
                emphasis: {
                    show: true,
                    textStyle: {
                        fontSize: '12',
                        color: '#fff'
                    }
                }
            },
            labelLine: {
                normal: {
                    show: false
                }
            },
            data: [
                { value: 800, name: '窗口' },
                { value: 300, name: '自助售票机' },
                { value: 100, name: '网购' }
            ]
        }
    ]
};
// 使用刚指定的配置项和数据显示图表。
xiaoshouqudao.setOption(optionXiaoshouqudao);

// 销售渠道占比2
var xiaoshouqudao2 = echarts.init(document.getElementById('xiaoshouqudao2'));
var optionXiaoshouqudao2 = {
    color: ["#49945f", "#0069ad", "#003d64"],
    tooltip: {
        trigger: 'item',
        formatter: "{a} <br/> {b} : {c} ({d}%)",
        position: function (point, params, dom, rect, size) {
            var x = 0; // x坐标位置
            var y = 0; // y坐标位置
            var pointX = point[0];
            var pointY = point[1];
            var boxWidth = size.contentSize[0];
            var boxHeight = size.contentSize[1];
            if (boxWidth > pointX) {
              x = 5;
            } else { // 左边放的下
              x = pointX - boxWidth;
            }
            if (boxHeight > pointY) {
              y = 5;
            } else { // 上边放得下
              y = pointY - boxHeight;
            }
            return [x, y];
          }
    },
    legend: {
        orient: 'vertical',
        right: '5%',
        top: '25%',
        itemWidth: 15,
        itemHeight: 10,
        textStyle: {
            color: '#fff'
        },
        data: ['景区购票', '网络购票']
    },
    series: [
        {
            "center": [
                "35%",
                "45%"
            ],
            name: '销售渠道占比',
            type: 'pie',
            radius: ['50%', '70%'],
            left: 6,
            top: 30,
            avoidLabelOverlap: false,
            label: {
                normal: {
                    show: false,
                    position: 'center'
                },
                emphasis: {
                    show: true,
                    textStyle: {
                        fontSize: '12',
                        color: '#fff'
                    }
                }
            },
            labelLine: {
                normal: {
                    show: false
                }
            },
            data: [
                { value: 800, name: '窗口' },
                { value: 300, name: '自助售票机' },
                { value: 100, name: '网购' }
            ]
        }
    ]
};
// 使用刚指定的配置项和数据显示图表。
xiaoshouqudao2.setOption(optionXiaoshouqudao2);

// 东京梦华销售渠道
var dongjingqudao = echarts.init(document.getElementById('dongjingqudao'));
var optionDngjingqudao = {
    color: ["#49945f", "#0069ad", "#003d64"],
    tooltip: {
        trigger: 'item',
        formatter: "{a} <br/> {b} : {c} ({d}%)",
        position: function (point, params, dom, rect, size) {
            var x = 0; // x坐标位置
            var y = 0; // y坐标位置
            var pointX = point[0];
            var pointY = point[1];
            var boxWidth = size.contentSize[0];
            var boxHeight = size.contentSize[1];
            if (boxWidth > pointX) {
              x = 5;
            } else { // 左边放的下
              x = pointX - boxWidth;
            }
            if (boxHeight > pointY) {
              y = 5;
            } else { // 上边放得下
              y = pointY - boxHeight;
            }
            return [x, y];
          }
    },
    legend: {
        orient: 'vertical',
        right: '2%',
        top: '0%',
        itemWidth: 15,
        itemHeight: 10,
        textStyle: {
            color: '#fff'
        },
        data: ['景区购票', '网络购票']
    },
    series: [
        {
            "center": [
                "30.0%",
                "50%"
            ],
            name: '销售渠道',
            type: 'pie',
            radius: ['40%', '60%'],
            left: 6,
            top: 30,
            avoidLabelOverlap: false,
            label: {
                normal: {
                    show: false,
                    position: 'center'
                },
                emphasis: {
                    show: true,
                    textStyle: {
                        fontSize: '12',
                        color: '#fff'
                    }
                }
            },
            labelLine: {
                normal: {
                    show: false
                }
            },
            data: [
                { value: 800, name: '景区购票' },
                { value: 300, name: '网络购票' }
            ]
        }
    ]
};
// 使用刚指定的配置项和数据显示图表。
dongjingqudao.setOption(optionDngjingqudao);


// 天界山门票分析
var tianjieshan = echarts.init(document.getElementById('tianjieshan'));
var optionTianjieshan = {
    color: ["#49945f", "#0069ad", "#003d64"],
    tooltip: {
        trigger: 'item',
        formatter: "{a} <br/> {b} : {c} ({d}%)",
        position: function (point, params, dom, rect, size) {
            var x = 0; // x坐标位置
            var y = 0; // y坐标位置
            var pointX = point[0];
            var pointY = point[1];
            var boxWidth = size.contentSize[0];
            var boxHeight = size.contentSize[1];
            if (boxWidth > pointX) {
              x = 5;
            } else { // 左边放的下
              x = pointX - boxWidth;
            }
            if (boxHeight > pointY) {
              y = 5;
            } else { // 上边放得下
              y = pointY - boxHeight;
            }
            return [x, y];
          }
    },
    legend: {
        orient: 'vertical',
        right: '5%',
        top: '2%',
        itemWidth: 15,
        itemHeight: 10,
        textStyle: {
            color: '#fff'
        },
        data: ['景区购票', '网络购票']
    },
    series: [
        {
            "center": ["30.0%", "50%"],
            name: '销售渠道',
            type: 'pie',
            radius: ['40%', '60%'],
            left: 6,
            top: 30,
            avoidLabelOverlap: false,
            label: {
                normal: {
                    show: false,
                    position: 'center'
                },
                emphasis: {
                    show: true,
                    textStyle: {
                        fontSize: '12',
                        color: '#fff'
                    }
                }
            },
            labelLine: {
                normal: {
                    show: false
                }
            },
            data: [
                { value: 800, name: '景区购票' },
                { value: 300, name: '网络购票' }
            ]
        }
    ]
};
tianjieshan.setOption(optionTianjieshan)
// 东京梦华游客类型
var dongjingyouke = echarts.init(document.getElementById('dongjingyouke'));
var optionDongjingyouke = {
    color: ['#ecfbff', '#a2e9ff', '#4bb6fc', '#009bff', '#0069ad', '#003d64'],
    tooltip: {
        trigger: 'item',
        formatter: "{a} <br/> {b} : {c} ({d}%)"
    },
    legend: {
        orient: 'vertical',
        right: '10%',
        bottom: '15%',
        itemWidth: 15,
        itemHeight: 10,
        textStyle: {
            color: '#fff'
        },
        data: ['企事业', '散客', '网购', '旅行社', '酒店']
    },
    series: [
        {
            "center": [
                "30.0%",
                "45%"
            ],
            name: '游客类型',
            type: 'pie',
            radius: [30, 60],
            roseType: 'radius',
            left: 6,
            top: 30,
            avoidLabelOverlap: false,
            label: {
                normal: {
                    show: false,
                    position: 'center'
                },
                emphasis: {
                    show: true,
                    textStyle: {
                        fontSize: '12',
                        color: '#fff'
                    }
                }
            },
            labelLine: {
                normal: {
                    show: false
                }
            },
            data: [
                { value: 600, name: '企事业' },
                { value: 500, name: '散客' },
                { value: 400, name: '网购' },
                { value: 200, name: '旅行社' },
                { value: 100, name: '酒店' }
            ]
        }
    ]
};
// 使用刚指定的配置项和数据显示图表。
dongjingyouke.setOption(optionDongjingyouke);
// youkeleixing
// 游客类型占比
var youkeleixing = echarts.init(document.getElementById('youkeleixing'));
var optionyoukeleixing = {
    color: ['#786588', '#ba6743', '#4c9150', '#207cb8', "#099fac"],
    tooltip: {
        trigger: 'item',
        formatter: "{a} <br/> {b} : {c} ({d}%)"
    },
    series: [
        {
            name: '游客类型占比',
            type: 'pie',
            radius: [20, 80],
            center : ['45%', '45%'],
            roseType: 'radius',
            left: 6,
            top: 30,
            avoidLabelOverlap: false,
            label: {
                normal: {
                    show: false,
                    position: 'center'
                },
                emphasis: {
                    show: true,
                    textStyle: {
                        fontSize: '12',
                        color: '#fff'
                    }
                }
            },
            labelLine: {
                normal: {
                    show: false
                }
            },
            data: [
                { value: 600, name: '散客' },
                { value: 500, name: '网络散客' },
                { value: 400, name: '地接社' },
                { value: 200, name: '加盟商' }
                // { value: 300, name: '放行业务' },
                // { value: 400, name: '散客(不含车)' },
                // { value: 200, name: '协议团' },
                // { value: 300, name: '学生团' },
                // { value: 300, name: '韩团' },
                // { value: 600, name: '拓展团' },
                // { value: 100, name: '自助购票' },
                // { value: 500, name: '网络业务' },
                // { value: 400, name: '香客业务' },
                // { value: 800, name: '加盟商' },
                // { value: 100, name: '学习团' }
            ]
        }
    ]
};


// 使用刚指定的配置项和数据显示图表。
youkeleixing.setOption(optionyoukeleixing);
// 网络购票数
var wangluo = echarts.init(document.getElementById('wangluo'));
var optionWangluo = {
    color: ['#786588', '#ba6743', '#4c9150', '#207cb8', "#099fac"],
    tooltip: {
        trigger: 'item',
        formatter: "{a} <br/> {b} : {c} ({d}%)"
    },
    series: [
        {
            "center": [
                "50%",
                "50%"
            ],
            name: '网络购票数',
            type: 'pie',
            radius: [30, 65],
            roseType: 'radius',
            left: 6,
            top: 30,
            avoidLabelOverlap: false,
            label: {
                normal: {
                    show: false,
                    position: 'center'
                },
                emphasis: {
                    show: true,
                    textStyle: {
                        fontSize: '12',
                        color: '#fff'
                    }
                }
            },
            labelLine: {
                normal: {
                    show: false
                }
            },
            data: [
                { value: 600, name: '去那儿' },
                { value: 500, name: '马蜂窝' },
                { value: 400, name: '驴妈妈' },
                { value: 200, name: '美团' },
                { value: 100, name: '携程' }
            ]
        }
    ]
};
// 使用刚指定的配置项和数据显示图表。
wangluo.setOption(optionWangluo);

// 线上分销统计
var xianshang = echarts.init(document.getElementById('xianshang'));
var XianshangOption = {
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'shadow'
        }
    },
    textStyle: {
        color: "#fff"
    },
    grid: {
        height: '86%',
        left: '2%',
        bottom: '2%',
        containLabel: true
    },
    calculable: true,
    xAxis: [
        {
            type: 'category',
            boundaryGap: 'none',
            axisLine: {
                lineStyle: {
                    color: 'none'
                }
            },
            data: ['驴妈妈', '携程', '美团', '去哪儿', '蚂蜂窝']
        }
    ],
    yAxis: [
        {
            type: 'value',
            boundaryGap: 'none',
            axisLine: {
                lineStyle: {
                    color: 'none'
                }
            },
            splitLine: {
                lineStyle: {
                    color: 'none'
                }
            }
        }
    ],
    series: [
        {
            name: '购票数量',
            type: 'bar',
            barWidth: 40,
            data: [390, 280, 330, 520, 420],
            itemStyle: {
                normal: {
                    barBorderRadius: [4, 4, 4, 4],
                    label: {
                        show: true,
                        textStyle: {
                            color: "#a2e9ff"
                        },
                        position: 'top'
                    },
                    color: function (params) {
                        var colorList = ['#786588', '#ba6743', '#4c9150', '#207cb8', "#099fac"];
                        return colorList[params.dataIndex];
                    }
                }
            }
        }
    ]
};
// 使用刚指定的配置项和数据显示图表。
xianshang.setOption(XianshangOption);

// otaOnline 线上OTA分销统计
// function otaOnline(params) {

// }